<template>
  <div class="container">
    <div class="app-container">
      <div class="role-operate">
        <!-- 按钮 -->
        <el-button type="primary" size="mini" @click="Add">添加角色</el-button>
        <!-- 表格 -->
        <el-table :data="RoleList">
          <el-table-column prop="name" align="center" width="200" label="角色">
            <template #default="{row}">
              <!-- row 行的数据  -->
              <!-- row.isEdit  true 编辑状态 / false 非编辑状态 -->
              <el-input v-if="row.isEdit" v-model="row.rowEdit.name" size="mini" />
              <span v-else>{{ row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="state" align="center" width="200" label="启用">
            <template #default="{row}">
              <el-switch v-if="row.isEdit" v-model="row.rowEdit.state" :active-value="1" :inactive-value="0" />
              <span v-else>
                {{ row.state === 1 ? '已启用' : row.state === 0 ? '未启用' : '无' }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="description" align="center" label="描述">
            <template #default="{row}">
              <el-input v-if="row.isEdit" v-model="row.rowEdit.description" type="textarea" size="mini" />
              <span v-else>{{ row.description }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template #default="{row}">
              <template v-if="row.isEdit">
                <el-button size="mini" type="primary" @click="btnConfirmRow(row)">确定</el-button>
                <el-button size="mini" @click="row.isEdit = false">取消</el-button>
              </template>
              <template v-else>
                <el-button type="text" @click="btnPermission(row.id)">分配权限</el-button>
                <el-button type="text" style="margin-right:10px" @click="edit(row)">编辑</el-button>
                <el-popconfirm
                  title="这是一段内容确定删除吗？"
                  @onConfirm="btnConfirmDel(row)"
                >
                  <template #reference>
                    <el-button type="text">删除</el-button>
                  </template>
                </el-popconfirm>
              </template>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row type="flex" justify="end" style="height:50px" align="middle">
          <el-pagination
            layout="prev, pager, next"
            :current-page="pageParams.page"
            :page-size="pageParams.pagesize"
            :total="total"
            @current-change="handleCurrentChange"
          />
        </el-row>
      </div>
    </div>
    <!-- 添加的弹层 -->
    <el-dialog width="500px" title="新增角色" :visible.sync="form.dialogVisible" @close="btnCancel">
      <el-form
        ref="form"
        :rules="rules"
        :model="form"
        label-width="120px"
      >
        <!-- 角色名称 -->
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="form.name" size="mini" style="width:80%" />
        </el-form-item>
        <!-- 启用 -->
        <el-form-item label="启用">
          <el-switch
            v-model="form.state"
            active-color="#409eff"
            inactive-color="#dcdfe6"
            :active-value="1"
            :inactive-value="0"
          />
        </el-form-item>
        <!-- 角色描述 -->
        <el-form-item label="角色描述" prop="description">
          <el-input
            v-model="form.description"
            type="textarea"
            :rows="3"
            size="mini"
            style="width:80%"
          />
        </el-form-item>
        <!-- 按钮 -->
        <el-form-item>
          <el-row style="width:80%" type="flex" justify="center">
            <el-button size="mini" type="primary" @click="btnConfirm">确定</el-button>
            <el-button size="mini" @click="btnCancel">取消</el-button>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="分配权限" :visible.sync="showPermissionDialog">
      <el-tree
        ref="permissionTree"
        node-key="id"
        check-strictly
        :default-checked-keys="permIds"
        default-expand-all
        show-checkbox
        :data="permissionList"
        :props="permissionProps"
      />
      <template #footer>
        <el-row type="flex" justify="center">
          <el-col :span="6">
            <el-button size="mini" type="primary" @click="btnPermissionOk">确定</el-button>
            <el-button size="mini" @click="showPermissionDialog = false">取消</el-button>
          </el-col>
        </el-row>
      </template>
    </el-dialog>

  </div>
</template>
<script>
import { getRoleList, AddRole, updateRole, DeleteRole, getRoleDetail, assignPremission } from '@/api/role'
import { getPermissionList } from '@/api/permission'
import { getDepartmentListToTree } from '@/utils'
export default {
  name: 'Role',
  data() {
    return {
      showPermissionDialog: false, // 权限弹层
      permissionList: [], // 权限树形数据
      currentId: null,
      permissionProps: {
        label: 'name',
        children: 'children'
      },
      permIds: [], // 角色拥有的权限集合
      rules: {
        name: [
          { required: true, message: '角色名称不能为空', trigger: ['blur'] }
          // { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: ['blur'] }
        ],
        description: [
          { required: true, message: '角色描述不能为空', trigger: ['blur'] }
          // { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: ['blur'] }
        ]
      },
      form: {
        name: '', // 角色名称
        description: '', // 角色描述
        state: 0, // 启用// 启用
        dialogVisible: false
      },
      RoleList: [],
      pageParams: {
        page: 1, // 当前页
        pagesize: 5 // 当前页的数量
      },
      total: 0 // 总条数
    }
  },
  created() {
    this.getRoleList()
  },
  methods: {
    // 点击 确定 分配权限
    async btnPermissionOk() {
      // 通过 tree 中的 getCheckedKeys 方法 可以 获取到 目前被选中的节点的 key 所组成的数组
      const data = this.$refs.permissionTree.getCheckedKeys()
      // console.log(data)
      await assignPremission({ id: this.currentId, permIds: data })
      // 提示用户 关闭弹层
      this.$message.success('角色权限分配成功')
      this.permIds = []
      this.showPermissionDialog = false
    },
    // 点击弹出层
    async btnPermission(id) {
      this.currentId = id
      const res = await getPermissionList()
      // 转化成树形数据
      this.permissionList = getDepartmentListToTree(res, 0)
      // 2. 根据角色id获取角色详情 - 包含了角色对应的权限集合
      const { permIds } = await getRoleDetail(id) // 获取详情
      this.permIds = permIds // 赋值 数据
      this.showPermissionDialog = true
    },
    // 1.点击删除 点击确定按钮
    // 2.调用删除的api
    // 3.提示用户删除成功
    // 4.判断当前页是否只剩最后一项，是的话 页码减一 前进到上一个的页码
    // 5.重新加载数据 更新页面
    async btnConfirmDel(row) {
      // console.log(row.id)
      await DeleteRole(row.id)
      this.$message.success('删除角色成功')
      // console.log(this.RoleList.length)
      if (this.RoleList.length === 1) this.pageParams.page--
      this.getRoleList()
    },
    async btnConfirmRow(row) {
      // 1. 判断表单的值是否为空
      if (row.rowEdit.name && row.rowEdit.description) {
        // 2. 发送请求 - 更新数据
        await updateRole({ ...row.rowEdit, id: row.id })
        this.$message.success('更新角色成功')
        // 3. 更新显示数据
        // Object.assign(目标对象, 源对象1, 源对象2, ...)
        // Object.assign() 静态方法将一个或者多个源对象中所有可枚举的自有属性复制到目标对象
        // 并返回修改后的目标对象。
        Object.assign(row, {
          ...row.rowEdit,
          isEdit: false
          // 4. 退出编辑状态 isEdit ---> false
        })
      } else {
        this.$message.error('角色和描述不能为空')
      }
    },
    // 点击编辑
    edit(row) {
      // console.log(row)
      // 改变isEdit 的值进入编辑状态
      row.isEdit = true
      // 更新缓存数据
      row.rowEdit = {
        name: row.name,
        state: row.state,
        description: row.description
      }
    },
    // 点击确定
    // 先校验表单 发送添加角色的请求
    async btnConfirm() {
    // 点击确定
    // 先校验表单 发送添加角色的请求
    // 更新角色的列表数据 渲染到页面
    // 重置表单 关闭弹层 让按钮变成默认的未启用状态
      this.$refs.form.validate()
      await AddRole(this.form)
      this.$message.success('添加角色成功')
      this.getRoleList()
      this.btnCancel()
    },
    // 重置表单 关闭弹层 让按钮变成默认的未启用状态
    btnCancel() {
      // 重置表单 关闭弹层 让按钮变成默认的未启用状态
      this.$refs.form.resetFields()
      this.form.state = 0
      this.form.dialogVisible = false
    },
    // 点击添加角色
    Add() {
      this.form.dialogVisible = true
    },
    // 切换页码 时 渲染相对应的数据
    handleCurrentChange(value) {
      // 切换页码 时 渲染相对应的数据
      // value 等于 当前页码
      // console.log(value)
      this.pageParams.page = value
      this.getRoleList()
    },
    async getRoleList() {
      // 获取角色列表
      // const res = await getRoleList()
      // console.log(res)
      const { rows, total } = await getRoleList(this.pageParams)
      // console.log(rows)
      this.RoleList = rows
      this.total = total
      // 通过遍历数组 给每个数据添加一个 isEdit 属性 来控制是否为编辑状态
      // 由于动态添加的属性不具备响应式 所以要使用$set
      // this.$set(目标对象, 属性, 属性值)
      this.RoleList.forEach(item => {
        // item.isEdit = false
        // isEdit 是否进入编辑状态 默认是false
        this.$set(item, 'isEdit', false)
        this.$set(item, 'rowEdit', {
          name: item.name,
          state: item.state,
          description: item.description
        })
      })
    }
  }
}
</script>
<style scoped>
.role-operate {
  padding: 10px;
}
::v-deep .el-dialog__footer{
  text-align: center;

}
</style>
